<template>
    <waterfall :line-gap="400" :watch="items" id="myDIV" >
        <!-- each component is wrapped by a waterfall slot -->
        <waterfall-slot
                v-for="(item, index) in items"
                :width="item.width"
                :height="item.height"
                :order="index"
                :key="item.id"
        >
            <v-goods :item="item" :index="index" class="item" :number="number" v-model="number" @transferGood="getGood"
                     @deleteGood="deleteGood"></v-goods>
        </waterfall-slot>
        <!--<div style=" width: 150px; margin: 0 auto;" v-if="allData">没有更多数据了</div>-->
    </waterfall>
</template>


<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vGoods from './Goods.vue';
    export default {
        props: {
            param: ''
        },
        data: function () {
            return {
                allData: false,
                loading: true,
                allItems: [],
                items: [],
                rows: 16,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                goodItem: '',
                number: -1
            }
        },
        mounted: function () {
            this.$$("#content").scrollTop(0)
            let self = this;
            this.rows = Math.floor(self.$$("#content")[0].scrollWidth / 400) * Math.floor(self.$$("#content").innerHeight() / 240)
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            })
            this.loadMore();
        },
        watch: {
            param(val){
                console.log(val)
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            }
        },
        methods: {
            loadMore: function () {
                let self = this;
                if (this.page <= this.totalPage) {
                    this.$axioxs.get("/goods/on-shelf?rows=" + this.rows + "&page=" + this.page + "&param=" + this.param)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.height = 240;
                                    item.width = 400;
                                    self.items.push(item);
                                });
                                self.loading = false;
                            },
                            (res) => {

                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                } else {
                    this.allData = true;
                    this.loading = false;
                }
            },
            getGood(res){
                let self = this;
                this.goodItem = res;
//                this.goodItem.push(res);
                this.setGoodItem();
                for (var i = 0; i < self.items.length; i++) {
                    if (res == self.items[i]) {
                        self.number = i;
                    }
                }
            },
            deleteGood(res){
//                let self = this;
//                var arr = [];
//                for (var i = 0; i < self.goodItem.length; i++) {
//                    if(res != self.goodItem[i]){
//                        arr.push( self.goodItem[i]);
//                    }
//                };
//                this.goodItem = arr;
                this.goodItem = '';
                this.setGoodItem();
            },
            setGoodItem(){
                this.$emit('transferGoodItem', this.goodItem);
            }
        },
        components: {
            vGoods, Waterfall, WaterfallSlot
        }
    }

</script>
<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
</style>
